<template>
  <view>
    <view
      class="option-bar"
      @click="gotoPicOption"
      :data-picinfo="picdetail"
      v-show="localData.phone === picdetail.phone"
    ></view>
    <image
      class="pic-main"
      :src="picdetail.pic_display"
      mode="widthFix"
      show-menu-by-longpress="true"
    ></image>
    <view class="swiper-textbar">
      <text
        class="swiper-text"
        :class="swiper_current == 0 ? 'swiper-text-active' : ''"
        @click="onSwiperBarClicked(0)"
        >简介
      </text>
      <text
        class="swiper-text"
        :class="swiper_current == 1 ? 'swiper-text-active' : ''"
        @click="onSwiperBarClicked(1)"
        >评论
      </text>
    </view>
    <swiper
      :current="swiper_current"
      :disable-touch="commenting"
      @change="onSwiperChange"
      :style="{ height: swiperHeight + 'px' }"
      class="swiper-main"
    >
      <swiper-item>
        <view class="pic-detail component">
          <view class="pic-detail-ow">{{ phone_fake }}</view>
          <view class="pic-detail-id">{{ picdetail.pic_id }}</view>
          <view class="pic-detail-ct">{{ picdetail.pic_createtime }}</view>
          <view class="pic-detail-ds">{{ picdetail.pic_description }}</view>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="component">
          <view class="commit-comment">
            <form @submit="submitComment">
              <textarea
                class="comment-context"
                v-model="comment_context"
                @focus="commentFocused"
                @blur="commentReleased"
                placeholder="发条评论"
                name="comment_context"
                :style="{ height: comment_area_height }"
              ></textarea>
              <button
                class="submit-comment-btn"
                form-type="submit"
                :disabled="comment_context.trim() === ''"
              >
                发布
              </button>
            </form>
          </view>
          <view class="all-comments">
            <view
              v-for="(obj, index) in comment_list"
              :key="(obj, index)"
              class="one-comment"
            >
              <view class="comment-user"
                >{{
                  obj.comment_owner
                    ? obj.comment_owner.replace(
                        /(\d{2})\d*(\d{2})/g,
                        "$1*****$2"
                      )
                    : ""
                }}
              </view>
              <view class="comments-contain">{{ obj.comment_content }}</view>
            </view>
            <view class="comment-user center">再也没有什么啦</view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      imgAddr: "",
      picdetail: {
        pic_id: " ",
        pic_display: "",
        pic_description: " ",
        pic_createtime: " ",
        phone: "xxxxxxxxx",
      },
      phone_fake: "xxxxxx",
      comment_context: "",
      swiper_current: 0,
      swiperHeight: 150,
      commenting: false,
      comment_area_height: "1.3em",
      comment_list: [
        { comment_owner: "xxx", comment_content: "你好" },
        { comment_owner: "yyy", comment_content: "世界" },
        { comment_owner: "xxx", comment_content: "你好" },
        { comment_owner: "yyy", comment_content: "世界" },
        { comment_owner: "xxx", comment_content: "你好" },
        { comment_owner: "yyy", comment_content: "世界" },
      ],
      client_height: 0,
    };
  },
  computed: mapState(["localData"]),
  onLoad: function (e) {
    // console.log(e.picid);
    this.getPicture(e.picid);
    this.getComments();
  },
  onReady: function () {
    // this.getClientHeight();
    this.setSwiperHeight();
  },
  methods: {
    commentFocused: function () {
      this.commenting = true;
      this.comment_area_height = "5em";
      setTimeout(this.setSwiperHeight, 50);
      // this.setSwiperHeight();
    },
    commentReleased: function () {
      this.commenting = false;
      this.comment_area_height = "1.3em";
      this.setSwiperHeight();
    },
    // TODO
    submitComment: function (e) {
      let comment = e.detail.value.comment_context;
      console.log(comment);
      let postData = {
        option: "create",
        comment_content: comment,
        comment_pic: this.picdetail.pic_id,
        comment_owner: this.localData.phone,
      };
      this.$http
        .post(this.urlApi.share, postData)
        .then((res) => {
          console.log(res);
          let status = res.data.status;
          switch (status) {
            case "100": {
              uni.showToast({ title: "发送成功" });
              let comobj = {
                comment_owner: this.localData.phone,
                comment_content: comment,
              };
              this.comment_list.push(comobj);
              this.comment_context = "";
              break;
            }
            case "101": {
              uni.showToast({ title: "发送失败", icon: "error" });
              break;
            }
          }
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({ title: "发送请求出错", icon: "error" });
        });
    },
    getComments: function () {
      console.log("获取评论");
      let postData = {
        option: "getCommentByPicture",
        pic_id: this.picdetail.pic_id,
      };
      this.$http
        .post(this.urlApi.share, postData)
        .then((res) => {
          console.log("comment res",res.data);
          this.comment_list = res.data;
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({ title: "评论请求失败", icon: "error" });
        });
    },
    getPicture: function (e) {
      e = JSON.parse(e);
      console.log("getPic", e);
      this.picdetail = e;
      this.phone_fake = e.phone.replace(/(\d{2})\d*(\d{2})/g, "$1*******$2");
      uni.setNavigationBarTitle({ title: "图片 - " + this.picdetail.pic_id });
      let postData = {
        option: "getPictureInfo",
        pic_id: e.pic_id,
      };
      this.$http
        .post(this.urlApi.pic, postData)
        .then((res) => {
          let status = res.data.status;
          // console.log(res.data);
          switch (status) {
            case "100": {
              this.picdetail = {
                pic_id: e.pic_id,
                pic_display: e.pic_display,
                pic_description: res.data.pic_discription,
                pic_createtime: res.data.pic_createtime,
                phone: e.phone,
              };
              break;
            }
            case "101": {
              uni.showToast({
                title: "图片信息获取失败 请重新获取",
                icon: "error",
              });
              break;
            }
          }
        })
        .catch((err) => {
          uni.showToast({ title: "图片信息请求失败", icon: "error" });
          console.log(err);
        });
    },
    gotoPicOption: function (e) {
      console.log("图片设置");
      uni.navigateTo({
        url:
          "/pages/details/picModify" +
          "?picinfo=" +
          encodeURIComponent(JSON.stringify(e.currentTarget.dataset.picinfo)),
      });
    },
    onSwiperChange: function (e) {
      // console.log(e);
      this.swiper_current = e.detail.current;
      this.setSwiperHeight();
      // console.log(this.swiper_current);
    },
    onSwiperBarClicked: function (e) {
      this.swiper_current = e;
    },
    setSwiperHeight() {
      let query = uni.createSelectorQuery().in(this);
      query.selectAll(".component").boundingClientRect();
      // console.log(query.select(".component"));
      query.exec((res) => {
        this.swiperHeight = res[0][this.swiper_current].height;
        // console.log(res[0][this.swiper_current].height);
        // console.log(res);
      });
    },
    getClientHeight: function () {
      this.client_height = document.body.clientHeight;
      this.swiperHeight = this.client_height;
    },
  },
};
</script>

<style>
.option-bar {
  /* color: white; */
  font-family: codicon;
  font-size: 40rpx;
  padding: 0.5em;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  cursor: pointer;
}
.option-bar::before {
  content: "\eb94";
}
.one-comment {
  border-bottom: 1px solid grey;
}
.comment-user {
  font-size: 0.8em;
  color: grey;
  padding: 10rpx 20rpx 0 20rpx;
}
.comments-contain {
  padding: 10rpx 20rpx 20rpx 20rpx;
}
.commit-comment {
  width: 100%;
  display: flex;
  justify-content: center;
  /* position: fixed;
  z-index: 100;
  bottom: 0; */
}
.comment-context {
  background-color: #eee;
  width: 92%;
  padding: 4%;
  /* max-height: 1.3em; */
  line-height: 1.3em;
}
.swiper-main {
  box-shadow: 0 0 5rpx lightgrey;
}
.pic-main {
  display: block;
  margin: 0 auto;
  width: 100%;
}
.swiper-textbar {
  display: flex;
  justify-content: space-evenly;
}
.swiper-text {
  color: grey;
  font-size: 0.8em;
  padding: 0.4em;
}
.swiper-text-active {
  color: deepskyblue;
}
.pic-detail-id {
  color: grey;
  font-size: 0.6em;
  padding: 10rpx 20rpx 20rpx 20rpx;
}
.pic-detail-id::before {
  content: "id ";
  font-size: 0.8em;
}
.pic-detail-ct::before {
  content: "上传时间 ";
}
.pic-detail-ct {
  color: grey;
  font-size: 0.8em;
  padding: 10rpx 20rpx 20rpx 20rpx;
}
.pic-detail-ds::before {
  content: "简介 ";
}
.pic-detail-ds {
  font-size: 0.8em;
  padding: 10rpx 20rpx 20rpx 20rpx;
}
.component {
  padding-bottom: 100rpx;
}
.pic-detail-ow::before {
  content: "上传者 ";
}
.pic-detail-ow {
  padding: 10rpx 20rpx 20rpx 20rpx;
}
.center {
  text-align: center;
}
</style>